<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=KLvGmc82LiqmbyWkfq2bqCpCUHexQSDH"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
</head>
<body>
<form class="layui-form" id="form1">
    <div style="float: left;border: 0.5px;padding-top: 35px;padding-left: 100px;">
        <div class="layui-form-item">
            <label class="layui-form-label">救援地址</label>
            <button class="layui-btn" type="button" onclick="codeAddress()" id="search">搜索</button>
            <div class="layui-input-inline">
                <input type="address" id="address" name="address" required lay-verify="required" placeholder="救援地址"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div style="width: 500px;height: 500px;" id="allmap"></div>
    </div>
    <div class="container" style="float: left;margin: 150px; padding: 5px;  ">
        <div class="layui-form-item">
            <label class="layui-form-label">手&nbsp;机&nbsp;号</label>
            <div class="layui-input-inline">
                <input type="phone" name="phone" id="phone" required lay-verify="required" placeholder="手机号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
            <div class="layui-input-inline">
                <input type="name" name="name" id="name" required lay-verify="required" placeholder="客户姓名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车&nbsp;牌&nbsp;号</label>
            <div class="layui-input-inline">
                <input type="car" id="car" name="car" required lay-verify="required" placeholder="车牌号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">救援项目</label>
            <div class="layui-input-inline">
                <select name="contents" id="contents" lay-verify="contents" lay-filter="contents">
                    <option value="电瓶搭电">电瓶搭电</option>
                    <option value="补胎">补胎</option>
                    <option value="拖车">拖车</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-inline">
                <input type="cost" readonly="readonly" id="cost" name="cost" required lay-verify="required"
                       placeholder="价钱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">

                <button class="layui-btn" type="button" id="subbtn" lay-filter="formDemo">提交</button>
            </div>
        </div>
    </div>
    <input name="id" id="id" type="hidden"/>
    <input name="lng" id="lng" type="hidden"/>
    <input name="lat" id="lat" type="hidden"/>
</form>
</body>
<script type="text/javascript" src="/static/js/layui/layui.js"></script>
<script>
    var order = window.parent.order[0];
    console.log(order);
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;
        $("#id").val(order.id);
        $("#address").val(order.address);
        $("#cost").val(order.cost);
        $("#name").val(order.name);
        $("#phone").val(order.phone);
        $("#car").val(order.car);
        $("#contents").find("option:contains('" + order.contents + "')").attr("selected", true);
        $(document).on('click', '#subbtn', function () {
            $.ajax({
                url: '/orders/updateOrder',// 跳转到 action
                type: 'post',
                data: $("#form1").serialize(),
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg("修改成功！");
                    }
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index);
                    window.parent.location.reload();
                },
                error: function (error) {
                    // view("异常！");
                }
            });
        });
    });


    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    var point = new BMap.Point(order.lng, order.lat);
    var marker2 = new BMap.Marker(point);  // 创建标注
    map.enableScrollWheelZoom(true);
    map.addOverlay(marker2);
    // 设置地图显示的城市 此项是必须设置的
    map.setCurrentCity(order.address);
    map.centerAndZoom(point, 14);  // 初始化地图,设置中心点坐标和地图级别
    map.addEventListener("click", showInfo);

    function showInfo(e) {
        map.removeOverlay(marker2);
        document.getElementById("lng").value = e.point.lng;
        document.getElementById("lat").value = e.point.lat;
        marker2 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
        //获取计算金额
        $.get("/SSMR/customerPhone/getMoney?lng=" + e.point.lng + "&lat=" + e.point.lat, function (data) {
            $("#cost").val(data);
        });
        map.addOverlay(marker2);
    }

    var geoc = new BMap.Geocoder();
    map.addEventListener("click", function (e) {
        var pt = e.point;
        var aa;
        geoc.getLocation(pt, function (rs) {
            map.removeOverlay(marker2);
            var addComp = rs.addressComponents;
            aa = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            document.getElementById("address").value = aa;
            marker2 = new BMap.Marker(pt);  // 创建标注
            map.addOverlay(marker2);
        });
    });

    function codeAddress() {
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(document.getElementById("address").value, function (point) {
            if (point) {
                map.removeOverlay(marker2);
                map.centerAndZoom(point, 14);
                document.getElementById("lng").value = point.lng;
                document.getElementById("lat").value = point.lat;
                marker2 = new BMap.Marker(point);
                map.addOverlay(marker2);
            } else {
                map.removeOverlay(marker2);
                alert("您输入的地址在地图中未找到，请重新输入地址!");
            }
        }, "");
    }
</script>

</html>